<template>
  <div class="todo-container">
    <el-container>
      <el-header>
        <h1>
          <el-icon><Calendar /></el-icon>
          我的待办事项
        </h1>
      </el-header>
      
      <el-main>
        <!-- 添加新任务 -->
        <el-row class="add-task">
          <el-col :span="20">
            <el-input
              v-model="newTask"
              placeholder="请输入待办事项"
              @keyup.enter="addTask"
            >
              <template #append>
                <el-button type="primary" @click="addTask">
                  添加
                </el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>

        <!-- 任务列表 -->
        <el-card class="task-list">
          <template #header>
            <div class="card-header">
              <span>任务列表</span>
              <div>
                <el-radio-group v-model="filter" size="small">
                  <el-radio-button label="all">全部</el-radio-button>
                  <el-radio-button label="active">进行中</el-radio-button>
                  <el-radio-button label="completed">已完成</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>

          <el-empty v-if="filteredTasks.length === 0" description="暂无待办事项" />

          <transition-group name="list" tag="ul" class="todo-list">
            <li v-for="task in filteredTasks" :key="task.id" class="todo-item">
              <el-row align="middle">
                <el-col :span="2">
                  <el-checkbox v-model="task.completed" />
                </el-col>
                <el-col :span="16">
                  <span :class="{ completed: task.completed }">{{ task.text }}</span>
                </el-col>
                <el-col :span="6" class="actions">
                  <el-button-group>
                    <el-button
                      type="primary"
                      :icon="Edit"
                      size="small"
                      @click="editTask(task)"
                    />
                    <el-button
                      type="danger"
                      :icon="Delete"
                      size="small"
                      @click="deleteTask(task)"
                    />
                  </el-button-group>
                </el-col>
              </el-row>
            </li>
          </transition-group>
        </el-card>

        <!-- 统计信息 -->
        <el-card class="statistics" v-if="tasks.length > 0">
          <el-row justify="space-between">
            <el-col :span="8">总任务: {{ tasks.length }}</el-col>
            <el-col :span="8">已完成: {{ completedCount }}</el-col>
            <el-col :span="8">
              <el-button type="danger" size="small" @click="clearCompleted">
                清除已完成
              </el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-main>
    </el-container>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="编辑任务"
      width="30%"
    >
      <el-input v-model="editingTask.text" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Calendar, Edit, Delete } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 状态
const newTask = ref('')
const tasks = ref([])
const filter = ref('all')
const dialogVisible = ref(false)
const editingTask = ref(null)

// 计算属性
const filteredTasks = computed(() => {
  switch (filter.value) {
    case 'active':
      return tasks.value.filter(task => !task.completed)
    case 'completed':
      return tasks.value.filter(task => task.completed)
    default:
      return tasks.value
  }
})

const completedCount = computed(() => {
  return tasks.value.filter(task => task.completed).length
})

// 方法
const addTask = () => {
  if (newTask.value.trim()) {
    tasks.value.push({
      id: Date.now(),
      text: newTask.value,
      completed: false
    })
    newTask.value = ''
    ElMessage.success('任务添加成功')
  }
}

const deleteTask = (task) => {
  const index = tasks.value.indexOf(task)
  tasks.value.splice(index, 1)
  ElMessage.success('任务删除成功')
}

const editTask = (task) => {
  editingTask.value = { ...task }
  dialogVisible.value = true
}

const saveEdit = () => {
  if (editingTask.value.text.trim()) {
    const task = tasks.value.find(t => t.id === editingTask.value.id)
    task.text = editingTask.value.text
    dialogVisible.value = false
    ElMessage.success('任务更新成功')
  }
}

const clearCompleted = () => {
  tasks.value = tasks.value.filter(task => !task.completed)
  ElMessage.success('已清除完成的任务')
}
</script>

<style scoped>
.todo-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.el-header {
  text-align: center;
  line-height: 60px;
}

h1 {
  margin: 0;
  color: #409EFF;
}

.add-task {
  margin-bottom: 20px;
}

.task-list {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-item {
  padding: 10px 0;
  border-bottom: 1px solid #EBEEF5;
}

.todo-item:last-child {
  border-bottom: none;
}

.completed {
  text-decoration: line-through;
  color: #909399;
}

.actions {
  text-align: right;
}

.statistics {
  text-align: center;
}

/* 动画效果 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>